<template>
  <view class="equity-warp">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="查看权益"></van-nav-bar>
    <!-- #endif -->
    <scroll-view scroll-y="true" :style="styleHeight" class="scroll-view">
      <swiper
        class="swiper"
        :previous-margin="'14px'"
        :next-margin="'20px'"
        duration="300"
        :current="data.current"
        @change="bindchangeFun">
        <swiper-item v-for="(items, index) in data.levelData" :key="index">
          <view class="top equity-image">
            <view class="flex">
              <view style="display: flex; align-items: center">
                <div class="swiper-item equity-image" :class="`equity-bg${items.picture}`"></div>
                <!-- <image class="swiper-item equity-image" :src="items.pic"></image> -->
                <view
                  class="equity-title"
                  :style="{
                    color:
                      items.picture == '1'
                        ? 'rgba(66, 70, 80, 1)'
                        : items.picture == '2'
                        ? 'rgba(117, 84, 39, 1)'
                        : items.picture == '3'
                        ? 'rgba(99, 73, 59, 1)'
                        : items.picture == '4'
                        ? 'rgba(91, 68, 153, 1)'
                        : items.picture == '5'
                        ? '#2992FF'
                        : items.picture == '6'
                        ? 'rgba(245, 97, 1, 1)'
                        : items.picture == '7'
                        ? '#D8BC8D'
                        : '#fff',
                  }">
                  {{ items.levelName }}
                </view>
                <view
                  class="equity-content"
                  :style="{
                    backgroundColor:
                      items.picture == '1'
                        ? 'rgba(164, 177, 207, 0.4)'
                        : items.picture == '2'
                        ? 'rgba(218, 194, 142, 0.5)'
                        : items.picture == '3'
                        ? 'rgba(232, 190, 159, 0.5)'
                        : items.picture == '4'
                        ? 'rgba(178, 166, 223, 0.5)'
                        : items.picture == '5'
                        ? '#C1E2FF'
                        : items.picture == '6'
                        ? 'rgba(245, 97, 1, 1)'
                        : items.picture == '7'
                        ? 'rgba(25, 25, 25, 1)'
                        : '#fff',
                    color:
                      items.picture == '1'
                        ? '#424650'
                        : items.picture == '2'
                        ? '#755427'
                        : items.picture == '3'
                        ? '#63493B'
                        : items.picture == '4'
                        ? '#5B4499'
                        : items.picture == '5'
                        ? '#2992FF'
                        : items.picture == '6'
                        ? '#FFE0C6'
                        : items.picture == '7'
                        ? '#D8BC8D'
                        : '#fff',
                  }">
                  <text
                    v-if="
                      items.discountStatus === 0 ||
                      (data.levelData.length !== index + 1 && items.discountStatus === 1)
                    ">
                    恭喜，您已获得当前等级！
                  </text>
                  <text v-if="items.discountStatus === 2">
                    再获取{{ items.middleEmpiricalValue }}经验值可成长至该等级
                  </text>
                  <text v-if="data.levelData.length === index + 1 && items.discountStatus === 1">
                    您已达到最高等级
                  </text>
                </view>
                <!-- 进度条数字显示 -->
                <view class="process-val">
                  <view class="val-start">
                    <text class="val-text" :class="`val-text${items.picture}`">
                      {{ items.startEmpiricalValue }}
                    </text>
                    <view class="val-soild"></view>
                  </view>
                  <!-- 当前等级样式 -->
                  <view
                    v-if="items.discountStatus === 1 && data.experienceValue != 0"
                    class="val-now"
                    :style="{
                      position: 'absolute',
                      left: data.tipWidth,
                      top: '-4rpx',
                      color:
                        items.picture == '1'
                          ? '#424650'
                          : items.picture == '2'
                          ? '#755427'
                          : items.picture == '3'
                          ? '#63493B'
                          : items.picture == '4'
                          ? '#5B4499'
                          : items.picture == '5'
                          ? '#2992FF'
                          : items.picture == '6'
                          ? '#755427'
                          : items.picture == '7'
                          ? '#755427'
                          : '#fff',
                      backgroundColor:
                        items.picture == '1'
                          ? '#E2E8F7'
                          : items.picture == '2'
                          ? '#FBEFD9'
                          : items.picture == '3'
                          ? '#FFEFE2'
                          : items.picture == '4'
                          ? '#E8E5FD'
                          : data.levelDetail.picture == '5'
                          ? 'RGB(210,231,255)'
                          : data.levelDetail.picture == '6'
                          ? 'RGB(255,187,134)'
                          : data.levelDetail.picture == '7'
                          ? 'RGB(196,196,200)'
                          : '#fff',
                      border:
                        items.picture == '1'
                          ? '1px solid #E2E8F7'
                          : items.picture == '2'
                          ? '1px solid #FBEFD9'
                          : items.picture == '3'
                          ? '1px solid #FFEFE2'
                          : items.picture == '4'
                          ? '1px solid #E8E5FD'
                          : items.picture == '5'
                          ? '1px solid RGB(210,231,255)'
                          : items.picture == '6'
                          ? '1px solid RGB(255,187,134)'
                          : items.picture == '7'
                          ? '1px solid RGB(196,196,200)'
                          : '1px solid #fff',
                    }">
                    <view
                      class="arrow_b_int"
                      :style="{
                        borderColor:
                          items.picture == '1'
                            ? '#E2E8F7 transparent transparent transparent'
                            : items.picture == '2'
                            ? '#FBEFD9 transparent transparent transparent'
                            : items.picture == '3'
                            ? '#FFEFE2 transparent transparent transparent'
                            : items.picture == '4'
                            ? '#E8E5FD transparent transparent transparent'
                            : items.picture == '5'
                            ? ' RGB(210,231,255) transparent transparent transparent'
                            : items.picture == '6'
                            ? 'RGB(255,187,134) transparent transparent transparent'
                            : items.picture == '7'
                            ? 'RGB(196,196,200) transparent transparent transparent'
                            : '#fff transparent transparent transparent',
                      }"></view>
                    {{ data.experienceValue }}
                  </view>
                  <view class="val-end" v-if="index + 1 !== data.levelData.length">
                    <text class="val-text" :class="`val-text${items.picture}`">
                      {{ items.endEmpiricalValue }}(升级)
                    </text>
                    <view
                      class="val-soild"
                      :style="{
                        backgroundColor:
                          items.picture == '1'
                            ? '#475993'
                            : items.picture == '2'
                            ? '#755427'
                            : items.picture == '3'
                            ? '#63493B'
                            : items.picture == '4'
                            ? '#5B4499'
                            : items.picture == '5'
                            ? '#2992FF'
                            : items.picture == '6'
                            ? '#FFBB86'
                            : items.picture == '7'
                            ? '#C4C4C8'
                            : '#fff',
                      }"></view>
                  </view>
                </view>
                <!-- 进度条 -->
                <view
                  class="equity-process"
                  :style="{
                    backgroundColor:
                      items.picture == '1'
                        ? '#475993'
                        : items.picture == '2'
                        ? '#755427'
                        : items.picture == '3'
                        ? '#63493B'
                        : items.picture == '4'
                        ? '#5B4499'
                        : items.picture == '5'
                        ? '#2992FF'
                        : items.picture == '6'
                        ? '#FFBB86'
                        : items.picture == '7'
                        ? '#D8BC8D'
                        : '#fff',
                  }">
                  <!-- 已升级的 -->
                  <view
                    v-if="items.discountStatus === 0"
                    class="real-process"
                    :style="{
                      width: '100%',
                      background:
                        items.picture == '1'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(239, 243, 252, 0.8) 100%)'
                          : items.picture == '2'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #FBEFD8 100%)'
                          : items.picture == '3'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #EEDAC9 100%)'
                          : items.picture == '4'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #D6CFFF 100%)'
                          : items.picture == '5'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #fff  100%)'
                          : items.picture == '6'
                          ? 'linear-gradient(90deg, #FFEDDF 100%, #FFFCF9 100%)'
                          : items.picture == '7'
                          ? 'linear-gradient(90deg, #D9D9D9 0%, #D9D9D9 100%)'
                          : '#fff',
                    }"></view>
                  <!-- 当前等级的 -->
                  <view
                    v-if="items.discountStatus === 1"
                    class="real-process"
                    :style="{
                      width: data.levelLineWidth,
                      background:
                        items.picture == '1'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(239, 243, 252, 0.8) 100%)'
                          : items.picture == '2'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #FBEFD8 100%)'
                          : items.picture == '3'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #EEDAC9 100%)'
                          : items.picture == '4'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #D6CFFF 100%)'
                          : items.picture == '5'
                          ? 'linear-gradient(90deg, rgb(255, 255, 255) 0%, #fff  100%)'
                          : items.picture == '6'
                          ? 'linear-gradient(90deg, #FFEDDF 100%, #FFFCF9 100%)'
                          : items.picture == '7'
                          ? 'linear-gradient(90deg, #D9D9D9 0%, #D9D9D9 100%)'
                          : '#fff',
                    }"></view>
                  <!-- 待升等级的 -->
                  <view
                    v-if="items.discountStatus === 2"
                    class="real-process"
                    :style="{
                      width: '100%',
                      backgroundColor:
                        items.picture == '1'
                          ? '#475993'
                          : items.picture == '2'
                          ? '#755427'
                          : items.picture == '3'
                          ? '#63493B'
                          : items.picture == '4'
                          ? '#5B4499'
                          : items.picture == '5'
                          ? '#2992FF'
                          : items.picture == '6'
                          ? 'rgba(245, 97, 1, 1)'
                          : items.picture == '7'
                          ? '#D8BC8D'
                          : '#fff',
                    }"></view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <view class="down">
        <view class="coupon-wrap" v-if="!data.levelDetail?.isDefault">
          <view
            class="coupon"
            :style="{
              backgroundColor:
                data.levelDetail.picture == '1'
                  ? '#E2E8F7'
                  : data.levelDetail.picture == '2'
                  ? '#FBEFD9'
                  : data.levelDetail.picture == '3'
                  ? '#FFEFE2'
                  : data.levelDetail.picture == '4'
                  ? '#E8E5FD'
                  : data.levelDetail.picture == '5'
                  ? 'RGB(210,231,255)'
                  : data.levelDetail.picture == '6'
                  ? 'RGB(255,187,134)'
                  : data.levelDetail.picture == '7'
                  ? 'RGB(196,196,200)'
                  : '#fff',
            }">
            <view
              class="coupon-title"
              :class="`val-text${data.levelDetail.picture}`"
              v-if="data.levelDetail?.type == 1">
              服务费折扣权益
            </view>
            <view
              class="coupon-title"
              :class="`val-text${data.levelDetail.picture}`"
              v-if="data.levelDetail?.type == 2">
              电费折扣权益
            </view>
            <view
              class="coupon-title"
              :class="`val-text${data.levelDetail.picture}`"
              v-if="data.levelDetail?.type == 3">
              总费用折扣权益
            </view>
            <view
              class="coupon-content"
              :style="{
                color:
                  data.levelDetail.picture == '1'
                    ? '#475993'
                    : data.levelDetail.picture == '2'
                    ? '#755427'
                    : data.levelDetail.picture == '3'
                    ? '#63493B'
                    : data.levelDetail.picture == '4'
                    ? '#5B4499'
                    : data.levelDetail.picture == '5'
                    ? '#2992FF'
                    : data.levelDetail.picture == '6'
                    ? 'rgba(245, 97, 1, 1)'
                    : data.levelDetail.picture == '7'
                    ? '#9D6B16'
                    : '#fff',
              }">
              {{ data.levelDetail.discount / 10 }}折
            </view>
            <view class="trapezoid trapezoid0" v-if="data.levelDetail?.discountStatus == 0"></view>
            <view class="text" v-if="data.levelDetail?.discountStatus == 0">已失效</view>
            <view class="trapezoid trapezoid1" v-if="data.levelDetail?.discountStatus == 1"></view>
            <view class="text" v-if="data.levelDetail?.discountStatus == 1">生效中</view>
            <view class="trapezoid trapezoid2" v-if="data.levelDetail?.discountStatus == 2"></view>
            <view class="text" v-if="data.levelDetail?.discountStatus == 2">待升级</view>
          </view>
          <view class="details">
            <view
              class="details-title"
              :style="{
                color:
                  data.levelDetail.picture == '1'
                    ? '#475993'
                    : data.levelDetail.picture == '2'
                    ? '#755427'
                    : data.levelDetail.picture == '3'
                    ? '#63493B'
                    : data.levelDetail.picture == '4'
                    ? '#5B4499'
                    : data.levelDetail.picture == '5'
                    ? '#2992FF'
                    : data.levelDetail.picture == '6'
                    ? 'rgba(245, 97, 1, 1)'
                    : data.levelDetail.picture == '7'
                    ? '#9D6B16'
                    : '#fff',
              }">
              权益信息
            </view>
            <!-- <scroll-view scroll-y="true" style="height: calc(100vh-500rpx)"> -->
            <view class="d-title">
              <text class="iconfont icon-wallet"></text>
              抵扣费用类型：
            </view>
            <view class="d-content" v-if="data.levelDetail?.type == 1">服务费</view>
            <view class="d-content" v-if="data.levelDetail?.type == 2">电费</view>
            <view class="d-content" v-if="data.levelDetail?.type == 3">总费用</view>
            <view class="d-title">
              <text class="iconfont icon-explain"></text>
              使用说明：
            </view>
            <view class="d-content">
              {{ data.levelDetail.explainStatement }}
            </view>
            <view class="d-title">
              <text class="iconfont icon-map"></text>
              适用电站（运营商）
            </view>

            <view class="d-content" v-if="data.levelDetail.useType == '0'">全部</view>
            <view class="d-content" v-else>
              <view v-for="(items, index) in data.stationNameList" :key="index">{{ items }}</view>
              <!-- {{ data.levelDetail.stationNameList }} -->
            </view>
            <!-- </scroll-view> -->
          </view>
        </view>
        <view class="coupon-wrap" v-else>
          <view
            class="coupon"
            :style="{
              backgroundColor:
                data.levelDetail.picture == '1'
                  ? '#E2E8F7'
                  : data.levelDetail.picture == '2'
                  ? '#FBEFD9'
                  : data.levelDetail.picture == '3'
                  ? '#FFEFE2'
                  : data.levelDetail.picture == '4'
                  ? '#E8E5FD'
                  : data.levelDetail.picture == '5'
                  ? 'RGB(210,231,255)'
                  : data.levelDetail.picture == '6'
                  ? 'RGB(255,187,134)'
                  : data.levelDetail.picture == '7'
                  ? 'RGB(196,196,200)'
                  : '#fff',
            }">
            <view class="coupon-title" :class="`val-text${data.levelDetail.picture}`">
              折扣权益
            </view>
            <view
              class="coupon-content coupon-content1"
              :style="{
                color:
                  data.levelDetail.picture == '1'
                    ? '#475993'
                    : data.levelDetail.picture == '2'
                    ? '#755427'
                    : data.levelDetail.picture == '3'
                    ? '#63493B'
                    : data.levelDetail.picture == '4'
                    ? '#5B4499'
                    : data.levelDetail.picture == '5'
                    ? '#D2E7FF'
                    : data.levelDetail.picture == '6'
                    ? '#FFBB86'
                    : data.levelDetail.picture == '7'
                    ? '#9D6B16'
                    : '#fff',
              }">
              无可享受会员权益，去努力充电升级吧！
            </view>
            <view class="trapezoid trapezoid0" v-if="data.levelDetail?.discountStatus == 0"></view>
            <view class="text" v-if="data.levelDetail?.discountStatus == 0">已失效</view>
            <view class="trapezoid trapezoid1" v-if="data.levelDetail?.discountStatus == 1"></view>
            <view class="text" v-if="data.levelDetail?.discountStatus == 1">生效中</view>
            <view class="trapezoid trapezoid2" v-if="data.levelDetail?.discountStatus == 2"></view>
            <view class="text" v-if="data.levelDetail?.discountStatus == 2">待升级</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
 
<script lang="ts" setup>
import { ref, reactive, inject } from 'vue';
import { getSystemInfo, getUserId, setToastInstance, systemInfo } from '@mixins/info';

import { queryUserPrivilege } from '@/service/apis/mine';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});
let styleHeight = ref();
// #ifdef H5
styleHeight.value = `height: ${getSystemInfo().screenHeight - 10 - getSystemInfo().navHeight}px`;
// #endif

const data = reactive({
  levelData: [] as any, // 等级数据
  levelDetail: {} as any,
  current: '0',
  experienceValue: 0,
  stationNameList: [] as any,
  levelLineWidth: '40rpx',
  tipWidth: '10px',
});

const bindchangeFun = (e: any) => {
  data.levelDetail = data.levelData[e.detail.current];
  console.log(e.detail.current);
  if (e.detail.current !== 0 && data.levelDetail.useType !== '0') {
    data.stationNameList = data.levelDetail.stationNameList.split(',') || [];
  }
};

queryUserPrivilege({}, { account: { accountId: getUserId() } })
  .then((res: any) => {
    console.log(res);
    if (res) {
      data.levelData = res.dtoList;
      data.experienceValue = res.experienceValue;
      // data.experienceValue = 5500;
      data.current = data.levelData.findIndex((v: any) => v.curLevel === true);
      data.levelDetail = data.levelData[data.current];
      console.log(data.levelDetail);
      console.log(data.levelDetail.startEmpiricalValue);
      if (data.levelData.length !== 0 && data.levelDetail.useType !== '0') {
        data.stationNameList = data.levelDetail.stationNameList.split(',') || [];
      }
      const levelLineWidth =
        ((data.experienceValue - data.levelDetail.startEmpiricalValue) /
          (data.levelDetail.endEmpiricalValue - data.levelDetail.startEmpiricalValue)) *
        100;

      const tipWidth =
        ((data.experienceValue - data.levelDetail.startEmpiricalValue) /
          (data.levelDetail.endEmpiricalValue - data.levelDetail.startEmpiricalValue)) *
        331;
      if (levelLineWidth > 50 && levelLineWidth < 100) {
        data.levelLineWidth = `calc(${levelLineWidth}% - 40rpx)`;
        data.tipWidth = `${tipWidth - 50}px`;
      } else if (levelLineWidth === 50) {
        data.levelLineWidth = `50%`;
        data.tipWidth = `${tipWidth - 10}px`;
      } else if (levelLineWidth === 100) {
        data.levelLineWidth = `100%`;
        data.tipWidth = `${tipWidth - 55}px`;
      } else if (levelLineWidth < 50 && levelLineWidth !== 0) {
        data.levelLineWidth = `calc(${levelLineWidth}% + 40rpx)`;
        data.tipWidth = `${tipWidth}px`;
      } else if (levelLineWidth == 0) {
        data.tipWidth = `${tipWidth}px`;
      }
    }
  })
  .catch(() => {});

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>
<style>
page {
  background-color: #f4f4f4;
}
</style>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scroll-view {
  box-sizing: border-box;
  padding-top: 12px;
}

.swiper {
  // width: calc(100vw - 20px);
  // margin: 0 auto;
  font-size: 14px;
  // margin-top: 12px;
  // height: 100vh;
  .top {
    width: calc(100vw - 48px);
    margin: 0 10px;
    border-radius: 8px;
    position: relative;
    .equity-image {
      width: 331px;
      height: 139px;
      // position: absolute;
    }
    .equity-bg1 {
      background-image: url($url + 'mine/huiyuan1.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .equity-bg2 {
      background-image: url($url + 'mine/huiyuan2.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .equity-bg3 {
      background-image: url($url + 'mine/huiyuan3.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .equity-bg4 {
      background-image: url($url + 'mine/huiyuan4.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .equity-bg5 {
      background-image: url($url + 'mine/huiyuan5.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .equity-bg6 {
      background-image: url($url + 'mine/huiyuan6.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .equity-bg7 {
      background-image: url($url + 'mine/huiyuan7.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .equity-title {
      position: absolute;
      top: 16px;
      left: 20px;
      font-size: 20px;
      line-height: 30px;
      color: #424650;
    }
    .equity-content {
      position: absolute;
      top: 50px;
      left: 20px;
      font-size: 12px;
      line-height: 18px;
      color: #424650;
      padding: 4px 10px;
      border-radius: 50px;
    }
    .process-val {
      position: absolute;
      // top: 93px;
      top: 83px;
      color: #424650;
      // 11122222
      display: flex;
      justify-content: space-between;
      width: 100%;
      .val-start {
        // position: absolute;
        // left: 20px;
        width: 50%;
        margin-left: 20px;
        margin-top: 30px;
        .val-soild {
          position: absolute;
          top: 22px;
          // left: 4px;
          width: 8px;
          height: 8px;
          border-radius: 8px;
          background-color: rgba(255, 255, 255, 0.9);
          z-index: 999;
        }
      }
      .val-text1 {
        color: #424650;
      }
      .val-text2 {
        color: #755427;
      }
      .val-text3 {
        color: #755427;
      }
      .val-text4 {
        color: #5b4499;
      }
      .val-text5 {
        color: #0389ff;
      }
      .val-text6 {
        color: #8b3805;
      }
      .val-text7 {
        color: #d8bc8d;
      }

      .val-now {
        // width: 26px;
        height: 15px;
        text-align: center;
        // background: #fff1ce;
        // border: solid 1px #fff1ce;
        color: #755427;
        font-size: 12px;
        line-height: 15px;
        border-radius: 4px;
        padding: 0 4px;
        .arrow_b_int {
          width: 0px;
          height: 0px;
          border-width: 6px;
          border-style: solid;
          border-color: #fff1ce transparent transparent transparent;
          position: absolute;
          bottom: -12px;
          right: 12px;
        }
      }

      .val-end {
        // position: relative;
        // right: -233px;
        margin-right: 10px;
        margin-top: 30px;
        .val-text {
          white-space: nowrap;
          // margin-right: 10px;
        }
        .val-soild {
          position: absolute;
          top: 22px;
          right: 20px;
          width: 8px;
          height: 8px;
          border-radius: 8px;
          // background-color: #475993;
          z-index: 999;
        }
      }
    }
    .equity-process {
      position: absolute;
      // top: 117px;
      top: 106px;
      left: 0px;
      width: 331px;
      height: 4px;
      // background-color: #475993;
      .real-process {
        // width: 60%;
        height: 4px;
        // background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(239, 243, 252, 0.8) 100%);
      }
    }
    .icon-huiyuan {
      font-size: 60rpx;
      margin-right: 10rpx;
    }

    .level-mine {
      color: var(--text);
      padding: 5rpx 10rpx;
      border-radius: 15rpx;
      border: 1px solid var(--text);
    }

    .process {
      height: 20rpx;
      width: 96%;
      margin: 20rpx auto 10rpx;
      background: var(--processBg);
      border-radius: 10rpx;
      .processLight {
        height: 20rpx;
        line-height: 20rpx;
        border-radius: 10rpx;
        background: var(--text);
        text-align: right;
        .val-mine {
          vertical-align: super;
          padding-right: 10rpx;
          color: #fff;
          font-size: 20rpx;
        }
      }
    }

    .tips {
      margin-top: 20rpx;
    }
  }
}
.down {
  width: calc(100% - 50px);
  margin: 0 auto;
  // margin-top: -24px;
  // border-radius: 8px;
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .coupon-wrap {
    margin-top: 10px;
    .coupon {
      // background: #f9f9f9;
      border-radius: 8px;
      padding: 17px;
      text-align: center;
      border-bottom: 1px dashed #adaaaa;
      position: relative;
      .trapezoid {
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        width: 40px;
        transform: rotate(45deg);
        position: absolute;
        top: 10px;
        right: -25px;
        &.trapezoid0 {
          border-bottom: 30px solid #b5b5b5;
        }
        &.trapezoid1 {
          border-bottom: 30px solid #fa3939;
        }
        &.trapezoid2 {
          border-bottom: 30px solid #ffc700;
        }
      }
      .text {
        transform: rotate(45deg);
        font-size: 14px;
        line-height: 20px;
        color: #fff;
        position: absolute;
        top: 18px;
        right: 2px;
      }
      .coupon-title {
        font-size: 12px;
        line-height: 18px;
        color: #545454;
      }
      .coupon-content {
        font-size: 32px;
        line-height: 48px;
      }
      .coupon-content1 {
        font-size: 14px;
      }
    }
    .details {
      background: #fff;
      border-radius: 8px;
      padding: 15px;
      color: #999999;
      line-height: 25px;
      .details-title {
        font-size: 16px;
        line-height: 24px;
        color: #475993;
      }
      .d-title {
        margin-top: 5px;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
        color: #242424;
        .iconfont {
          font-size: 12px;
          color: #718df6;
        }
        // &::before {
        //   content: '';
        //   display: inline-block;
        //   width: 5px;
        //   height: 5px;
        //   background: #999999;
        //   border-radius: 100%;
        //   margin-right: 5px;
        //   margin-bottom: 3px;
        // }
      }
      .d-content {
        padding-left: 15px;
        font-size: 14px;
        line-height: 22px;
        color: #545454;
      }
    }
  }
}
</style>
